<template>
  <template v-for="item in props.menuData" :key="item.id">
    <el-sub-menu :index="item.id.toString()" v-if="item.children && item.children.length > 0">
      <template #title>
        <!-- <el-icon><Setting /></el-icon> -->
        <span>{{ item.title || item.name }}</span>
      </template>
      <!-- <el-menu-item :index="item.id.toString()" @click="targetRouter(item)">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span> {{ item.title || item.name }}</span>
        </template>
      </el-menu-item> -->
      <MenItem v-if="item.children && item.children.length > 0" :menuData="item.children"></MenItem>
    </el-sub-menu>
    <el-menu-item v-else :index="item.id.toString()" @click="targetRouter(item)">
      <template #title>
        <!-- <el-icon><Setting /></el-icon> -->
        <span> {{ item.title || item.name }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script lang="ts" setup>
// import { Setting } from '@element-plus/icons-vue'
import { Props } from '@/types/menu'
import MenItem from './MenItemCom.vue'
import { targetRouter } from './hook/index'
const props = withDefaults(defineProps<Props>(), {
  menuData: () => []
})
</script>
<style lang="less">
.menu_box {
  width: 100%;
  height: 100%;
}
.el_menu {
  width: 100%;
}
</style>
